<!--下拉表格弹窗_seo文案 -->
<template>
  <div>
    <!--    <div>lists&#45;&#45;{{lists}}</div>-->
    <!--    popper-class 弹框class
    :popper-width="500"
-->
    <ele-table-select id="tableSelect"
                      :hideOnSinglePage="true"
                      popper-class="select-display"
                      @select="selectVideo"
                      @clear="selectVideo"
                      ref="select"
                      v-model="form.seoCopywritingId"
                      :clearable="true"
                      placeholder="请选择文案"
                      value-key="id"
                      label-key="taticsName"
                      :table-config="tableConfig"
                      :popper-width="popWidth">
      <!-- 角色列 -->
      <template v-slot:roles="{ row }">
        <el-tag v-for="item in row.roles"
                :key="item.roleId"
                size="mini"
                type="primary"
                :disable-transitions="true">
          {{ item.roleName }}
        </el-tag>
      </template>
    </ele-table-select>
  </div>
</template>

<script>
import { projectPage } from "@/api/creatCenter/authoringClips";
export default {
  name: "connected-activities",
  props: {
    lists: Array,
    types: Number,
    seoCopywritingId: Number
  },
  data () {
    return {
      // popWidth:document.body.clientWidth * 0.3 - 120,
      popWidth: 0,
      form: {
        seoCopywritingId: ''
      },
      // 回显值
      initValue: undefined,
      // 表格配置
      tableConfig: {
        // 传值进入
        datasource: this.lists,
        columns: [
          {
            prop: 'taticsName',
            label: 'seo文案',
            sortable: 'custom',
            showOverflowTooltip: true,
            align: 'center',
          }
        ],
        layout: "prev, pager, next",  //是否，展示页数，和跳转等
        toolbar: false,
        pageSize: 10,
        pageSizes: [5, 10, 15, 20],
        size: 'small',
        hideOnSinglePage: true  //只有一页时，是否隐藏分页
      },
    }
  },
  methods: {
    init (id) {
      if (id) {
        this.$set(this.form, 'seoCopywritingId', id)
      }
      console.log("this.form,'seoCopywritingId", this.form.seoCopywritingId)
      this.popWidth = document.getElementById("tableSelect").offsetWidth;
      this.tableConfig.datasource = []
      this.tableConfig.datasource = this.lists
    },
    // 选择 视频素材
    selectVideo (e) {
      console.log('选择 视频素材', e)
      if (e) {
        this.form.seoCopywritingId = e.id //剪辑工程ID
      }
      // clear事件进入
      else {
        this.form.seoCopywritingId = ''  //剪辑工程ID
        // this.hint=''
      }
      this.$emit('getData', e) // 修改
    },
    clear () {
      this.form.seoCopywritingId = null
    }
  },
  watch: {
    seoCopywritingId (value) {
      console.log(value)
      this.form.seoCopywritingId = value
    }
  }
}
</script>

<style scoped lang="less">
</style>
